<template>
  <ContentBase>
    <div class="row">
      <div class="col-3">
        <!-- follow事件（子）触发的话，调用follow函数（父）-->
        <UserProfileInfo @follow="follow" @unfollow="unfollow" :user="user"/> <!-- 父组件给子组件传递数据 -->
        <UserProfileWrite v-if="is_me" @post_a_post="post_a_post" /> <!-- 如果是自己在看自己的主页，就显示发帖组件 -->
      </div>
      <div class="col-9">
        <UserProfilePosts :user="user" :posts="posts" @delete_a_post="delete_a_post" />
      </div>
    </div>
  </ContentBase>
</template>

<script>
// @ is an alias to /src
import ContentBase from '../components/ContentBase.vue';
import UserProfileInfo from '../components/UserProfileInfo.vue';
import UserProfilePosts from '../components/UserProfilePosts.vue';
import { reactive } from 'vue';
import UserProfileWrite from '../components/UserProfileWrite.vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import $ from 'jquery';
import { computed } from 'vue';
export default {
  name: 'UserProfileView',
  components: {
    ContentBase,
    UserProfileInfo,
    UserProfilePosts,
    UserProfileWrite,
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const userId =route.params.userId; //path: '/userprofile/:userId/' 这样就访问到了userId这个路径参数了
    console.log(userId);
    const user = reactive({ });
    const posts=reactive({ });
    $.ajax({ //获取某个用户的信息
      url:"https://app165.acapp.acwing.com.cn/myspace/getinfo/",
      type:"GET",
      data: {
        user_id: userId,
      },
      headers:{
        "Authorization": "Bearer " + store.state.user.access,
      },
      success(resp){
        user.id=resp.id;
        user.username=resp.username;
        user.photo=resp.photo;
        user.followerCount=resp.followerCount;
        user.is_followed=resp.is_followed;
      }
    });
    $.ajax({ //获取某个用户的发表过的帖子
      url:"https://app165.acapp.acwing.com.cn/myspace/post/",
      type:"GET",
      data: {
        user_id: userId,
      },
      headers:{
        "Authorization": "Bearer " + store.state.user.access,
      },
      success(resp){
        console.log(posts);
        posts.count=resp.length; //帖子数量
        console.log(resp);
        posts.posts=resp;
      }
    })
    const follow = () => {
      if(user.is_followed) return; // 如果已经关注则不执行
      user.is_followed = true; // 模拟关注操作
      user.followerCount++; // 粉丝数增加
    }
    const unfollow = () => {
      if(!user.is_followed) return; // 如果没有关注则不执行
      user.is_followed = false; 
      user.followerCount--; 
    }
    const post_a_post=(content)=>{
      posts.count++;
      posts.posts.unshift({
        id: posts.count,
        userId: 1,
        content: content, // 使用content作为帖子内容
      });
    }
    const delete_a_post=(post_id) =>{
      posts.posts = posts.posts.filter(post => post.id !== post_id); // 当帖子的id不等于传入的id的话就保留，否则不保留（就是删了）
      posts.count=posts.posts.length; // 帖子数量要更新

    }
    const is_me= computed(() => { // 计算属性，判断是否是当前登录用户在看主页
      return store.state.user.id===parseInt(userId);// userId是字符串类型，要转换成整数
    });
    return { 
      user,
      follow,
      unfollow,
      posts,
      post_a_post,
      is_me,  
      delete_a_post, // 删除帖子函数
    }
  }
}
</script>

<style scoped>
</style>